<template>
  <div class="category">

    <div class="wrapper">
      <div class="title">产品类目管理</div>
      <div class="tree">
        <!-- 一级按钮 -->
        <el-button type="warning" style="margin-bottom: 20px;">新增一级导航类目</el-button>
        <!-- tree内容结构 -->
        <!-- 
                data tree数据
                show-checkbox 多选框
                default-expand-all          是否默认展开所有节点 boolean - false
                expand-on-click-node	    是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
                render-content	            树节点的内容区的渲染 Function Function(h, { node, data, store }
             -->

        <el-tree :data="data" show-checkbox node-key="id" default-expand-all :expand-on-click-node="false"
          :render-content="renderContent">
        </el-tree>
      </div>


    </div>

    <!-- 弹框  -->
    <Dialog :title="title" ref="child" :type="type"></Dialog>

  </div>
</template>

<script>
import Dialog from './Dialog.vue'
import axios from 'axios';
export default {
  components: {
    Dialog
  },
  data() {
    return {
      title: '标题',
      type: 1,// 1 新增 2 修改
      data: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label2: '二级 1-1'
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label2: '二级 2-1'
        }, {
          id: 6,
          label2: '二级 2-2'
        }]
      }]

    }
  },
  created() {
    this.selecttype();
  },
  // 24.55
  methods: {
    //新增 1. 显示弹框 2.传递title动态 3. 修改type值 标识操作新增-修改
    append(data) {
      console.log('新增---------', data);
      this.$refs.child.dialogVisible = true;
      this.title = '新增 【新鲜水果】子集分类';
      this.type = 1

    },
    //删除
    remove(node, data) {

    },
    //修改 1. 显示弹框 2.传递title动态 3. 修改type值 标识操作新增-修改
    update() {
      console.log('修改------------');
      this.$refs.child.dialogVisible = true;
      this.title = '修改 【新鲜水果】 名称';
      this.type = 2;
    },
    //树节点的内容区的渲染 Function Function(h, { node, data, store }-------
    renderContent(h, { node, data, store }) {
      // console.log('render--',node,data);
      return (
        <span class="custom-tree-node">
          <span class='name'>{node.label}</span>
          {
            node.level == 1 ? <span>
              <el-button class="mini" on-click={() => this.append(data)} icon="el-icon-plus">新增</el-button>
              <el-button class="mini" on-click={() => this.update(node, data)} icon="el-icon-edit">修改</el-button>
              <el-button class="mini" type="danger" on-click={() => this.remove(node, data)} icon="el-icon-delete">删除</el-button>
            </span> : <span>
              <el-button class="mini" on-click={() => this.update(node, data)} icon="el-icon-edit">修改</el-button>
              <el-button class="mini" type="danger" on-click={() => this.remove(node, data)} icon="el-icon-delete">删除</el-button>
            </span>
          }
        </span>
      );
    },
    selecttype() {
      axios
        .get('https://lvyou.free.svipss.top/type/gettypeslist')
        .then((res) => {
          console.log(res);
          console.log(res.data.count);
          for (let i = 0; i < res.data.count; i++) {
             this.data.id= res.data.data[i].id
             this.data.label= res.data.data[i].typeName
            
          }


        },
          // 失败回调
          error => {
            console.log('请求失败！')

            // 请求失败原因
            console.log(error.message)
          }
        )
    }
  }
};
</script>

<style lang="less" scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.category {
  margin: 10px;
}

.wrapper {
  padding: 10px;
  margin-top: 10px;
  background: #fff;
}

.title {
  background: #f6f6f6;
  height: 50px;
  line-height: 50px;
  font-weight: bold;
  padding-left: 10px;
}

.tree {
  margin: 10px;


  /deep/ .mini {
    padding: 4px 10px;
    font-size: 14px;
  }

  /deep/ .el-tree-node__content {
    margin-bottom: 10px;
  }
}

/deep/ .name {
  width: 300px;
  display: inline-block;
}
</style>

